<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>组件嵌套</title>
</head>
<body>
    <div id="root">

    </div>

<script>


   const myHeader = Vue.extend({
    template:`
    <center><h1>{{title}}</h1></center>
    `,
    data:function(){
        return {
       title:'这是一个标题' 
    }
    }
   })

   const mySidebar = Vue.extend({
    template:`
    <ul>
       <li v-for="item in items">{{item}}</li>   
    </ul>
    `,
    data() {
        return {
       items:['功能1','功能2','功能3','功能4','功能5']
    }
    }
   })

   const myContent = Vue.extend({
    template:`
    <pre>{{article}}</pre>
    `,
    data() {
        return {
       article:
       `
Elasticsearch 是位于 Elastic Stack 核心的分布式搜索和分析引擎。Logstash 和 Beats 有助于收集、聚合和丰富您的数据并将其存储在 Elasticsearch 中。Kibana 使您能够以交互方式探索、可视化和分享对数据的见解，并管理和监控堆栈。Elasticsearch 是索引、搜索和分析魔法发生的地方。
Elasticsearch 为所有类型的数据提供近乎实时的搜索和分析。无论您拥有结构化或非结构化文本、数字数据还是地理空间数据，Elasticsearch 都能以支持快速搜索的方式高效地存储和索引它。您可以超越简单的数据检索和聚合信息来发现数据中的趋势和模式。随着您的数据和查询量的增长，Elasticsearch 的分布式特性使您的部署能够随之无缝增长。
       `
    }
    }
   })

   

    const app = Vue.extend({
       template:`
       <div>
        <my-header></my-header>
       <my-sidebar></my-sidebar>
       <my-content></my-content>    
        </div>
       `,
       components:{
        'my-header':myHeader,
        'my-sidebar':mySidebar,
        'my-content':myContent
       }
    }) 

    
    new Vue({
        template:`<app></app>`,
        el:'#root',
        data: {

        },
        components:{
         app:app
        }
    })
</script>    
</body>
</html>